import React, { useState, useEffect } from 'react';
import { Card, Button, Space, Statistic, Tag, message } from 'antd';
import { CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { checkIn, checkOut, getTodayAttendance } from '../../api/attendance';

const EmployeeAttendanceCard = () => {
    const [loading, setLoading] = useState(false);
    const [todayStatus, setTodayStatus] = useState({
        checkIn: null,
        checkOut: null,
        status: 0 // 0-未签到，1-已签到，2-已签退，3-迟到，4-早退，5-缺勤
    });

    useEffect(() => {
        fetchTodayAttendance();
    }, []);

    // 获取今日考勤状态
    const fetchTodayAttendance = async () => {
        try {
            const response = await getTodayAttendance();
            setTodayStatus(response.data);
        } catch (error) {
            console.error('获取今日考勤状态失败:', error);
            message.error('获取今日考勤状态失败');
        }
    };

    // 签到
    const handleCheckIn = async () => {
        setLoading(true);
        try {
            await checkIn();
            message.success('签到成功');
            fetchTodayAttendance();
        } catch (error) {
            console.error('签到失败:', error);
            message.error('签到失败');
        } finally {
            setLoading(false);
        }
    };

    // 签退
    const handleCheckOut = async () => {
        setLoading(true);
        try {
            await checkOut();
            message.success('签退成功');
            fetchTodayAttendance();
        } catch (error) {
            console.error('签退失败:', error);
            message.error('签退失败');
        } finally {
            setLoading(false);
        }
    };

    // 获取状态标签
    const getStatusTag = () => {
        const { status } = todayStatus;
        switch (status) {
            case 0:
                return <Tag>未签到</Tag>;
            case 1:
                return <Tag color="processing">已签到</Tag>;
            case 2:
                return <Tag color="success">已签退</Tag>;
            case 3:
                return <Tag color="warning">迟到</Tag>;
            case 4:
                return <Tag color="warning">早退</Tag>;
            case 5:
                return <Tag color="error">缺勤</Tag>;
            default:
                return <Tag>未知</Tag>;
        }
    };

    return (
        <Card title="今日考勤" extra={getStatusTag()}>
            <Space direction="vertical" style={{ width: '100%' }}>
                <Space size="large">
                    <Statistic
                        title="签到时间"
                        value={todayStatus.checkIn || '-'}
                        prefix={<ClockCircleOutlined />}
                    />
                    <Statistic
                        title="签退时间"
                        value={todayStatus.checkOut || '-'}
                        prefix={<CheckCircleOutlined />}
                    />
                </Space>
                <Space>
                    <Button
                        type="primary"
                        onClick={handleCheckIn}
                        loading={loading}
                        disabled={todayStatus.status === 1 || todayStatus.status === 2}
                    >
                        签到
                    </Button>
                    <Button
                        type="primary"
                        onClick={handleCheckOut}
                        loading={loading}
                        disabled={todayStatus.status === 0 || todayStatus.status === 2}
                    >
                        签退
                    </Button>
                </Space>
            </Space>
        </Card>
    );
};

export default EmployeeAttendanceCard;